<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/staffTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="content1">
        <div class="col-6 col-sm-6 col-lg-6">
            <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
            <!--<script type="text/javascript" src="../../res/js/jquery-1.10.2.min.js"></script>-->
            <script type="text/javascript" src="../../res/js/asscomposer.js"></script>
            <h:form id="form">

                <h:selectOneMenu id="h1" value="#{assigmentComposer.courseID}">

                    <f:selectItems value="#{courseManager.allCourse}" var="c" 
                                   itemLabel="#{c.name} #{c.courseId}"
                                   itemValue="#{c.courseId}"/>
                    <f:ajax render="g1" listener="#{assigmentComposer.selectCourse}"  />
                </h:selectOneMenu>
                <h:panelGroup id="g1">
                    <p:dataTable value="#{assigmentComposer.receiverList}" var="s">
                        <p:column>
                            #{s.accounts.fullName}
                        </p:column>
                        <p:column>
                            #{s.accounts.email}
                        </p:column>
                        <p:column>
                            <input type="checkbox"  value="#{s.accounts.email}" checked="false" class="stuCheck" />
                        </p:column>
                    </p:dataTable>

                    <input type="button" onclick="pick();" id="btnImport" value="Import" class="btn btn-default" />
                    <input type="button" onclick="selectAll(1);" id="btnAll" value="Select all" class="btn btn-default" />
                    <input type="button" onclick="selectAll(0);" id="btnDeAll" value="Deselect all" class="btn btn-default" />
                </h:panelGroup>

                <div class="form-group">
                    <div class="col-2">Title</div>
                    <div class="input-group ">
                        <span class="input-group-addon">@</span>
                        <!--<input type="text" class="form-control" placeholder="Full name" />-->
                        <h:inputText value="#{mailComposer.title}" styleClass="form-control"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-2">To</div>
                    <div class="input-group ">
                        <span class="input-group-addon">@</span>
                        <!--<input type="text" class="form-control" placeholder="Full name" />-->
                        <h:inputText id="recText" value="#{mailComposer.receiverString}"   styleClass="form-control recText"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group ">
                        <h:inputTextarea id="textarea"  class="editor" value="#{mailComposer.content}" />
                        <script type="text/javascript">
                        //<![CDATA[
                        CKEDITOR.replace('form:textarea');
                        //]]>
                        </script>
                    </div>

                </div>
                <p>Choose files to attach (not larger than 5MB per file ): </p>
                <div class="form-group">
                    <p:fileUpload fileUploadListener="#{mailComposer.upload}" mode="advanced" dragDropSupport="false"  
                                  update="messages1" sizeLimit="1000000"  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />  

                    <p:growl id="messages1" showDetail="true"/> 
                </div>
                <div class="formgroup">
                    <h:commandButton id="submitButton" value="Submit"  action="#{mailComposer.send}"
                                     styleClass="btn btn-success"             />  



                </div>
            </h:form> 
        </div>
    </ui:define>

</ui:composition>
